<div id="creatememe">
  <form action="/save" method="POST" id="createform" onsubmit="return formSubmit()">
    <input type="hidden" id="contest_key" name="contest_key" value="{{contest.key.id}}"/>
    <input type="hidden" id="topalign"    name="topalign"    value="center">
    <input type="hidden" id="middlealign" name="middlealign" value="center">
    <input type="hidden" id="bottomalign" name="bottomalign" value="center">

    <table id="makertable">
      <tr>
        <td class="label"><label for="top">Top text:</label></td>
        <td><textarea id="top" name="top" cols="40" rows="2"
                      tabindex="1"></textarea>
        </td>
        <td>
          <div class="alignButtons">
              <a id="topalignleft"
                 class="kd-button left small">
                <img src="/static/text_align_left.png" alt="Folder">
              </a>
              <a id="topaligncenter"
                 class="kd-button mid selected small">
                <img src="/static/text_align_center.png" alt="Folder">
              </a>
              <a id="topalignright"
                 class="kd-button right small">
                <img src="/static/text_align_right.png" alt="Folder">
              </a>
          </div>
        </td>
      </tr>

      <tr>
        <td class="label"><label for="middle">Middle text:</label></td>
        <td><textarea id="middle" name="middle" cols="40" rows="2"
                      tabindex="1"></textarea>
        </td>
        <td>
          <div class="alignButtons">
              <a id="middlealignleft"
                 class="kd-button left small">
                <img src="/static/text_align_left.png" alt="Folder">
              </a>
              <a id="middlealigncenter"
                 class="kd-button mid selected small">
                <img src="/static/text_align_center.png" alt="Folder">
              </a>
              <a id="middlealignright"
                 class="kd-button right small">
                <img src="/static/text_align_right.png" alt="Folder">
              </a>
          </div>
        </td>
      </tr>


      <tr>
        <td class="label"><label for="bottom">Bottom text:</label></td>
        <td><textarea id="bottom" name="bottom" cols="40" rows="2"
                      tabindex="1"></textarea>
        </td>
        <td>
          <div class="alignButtons">
              <a id="bottomalignleft"
                 class="kd-button left small">
                <img src="/static/text_align_left.png" alt="Folder">
              </a>
              <a id="bottomaligncenter"
                 class="kd-button mid selected small">
                <img src="/static/text_align_center.png" alt="Folder">
              </a>
              <a id="bottomalignright"
                 class="kd-button right small">
                <img src="/static/text_align_right.png" alt="Folder">
              </a>
          </div>
        </td>
      </tr>

      <tr>
        <td class="label"><label for="font">Font:</label></td>
        <td>
          <select name="font" id="font">
            {% for font in fonts %}
            <option value="{{ font.1|escape }}" {% if font.0 == 'Impact' %}selected{% endif %}>{{ font.0|escape }}</option>
            {% endfor %}
          </select>
        </td>
      </tr>
      <tr>
        <td class="label"><label for="name">Your name:</label></td>
        <td>
          <input name="name" id="name" value="{{name}}"/>
        </td>
      </tr>
    </table>
    <div class="buttonDiv">
      <input type="submit" value="Save" class="button"/>
    </div>
    <div id="preview">
      <div class="preview">
        <img src="/contestimage/{{contest.image.key.id}}" id="memeimage"/>
      </div>
      <div class="preview previewOverlay">
        <img src="" id="previewtext"/>
      </div>
    </div>
  </form>
</div>
